<?php require VIEWPATH . ADMIN_DIR . DIRECTORY_SEPARATOR . 'header.php' ?>
<style type="text/css">
	.btn-action:hover {
		cursor: pointer;
	}
    .btn-edit {
        color: #2679B5;
        font-size: 18px;
    }
    .btn-add {
        color: #69AA46;
        font-size: 18px;
    }
	.table-lesson {
		font-size: 14px;
	}
	.table-lesson th{
		text-align: center;
		width: 10%;
	}
	.table-lesson tbody tr td{
		text-align: center;
		/* color: #2679B5; */
		width: 10%;

	}
    .table-lesson tr th {
        vertical-align: middle !important;
    }
	.table-lesson tr td {
        vertical-align: middle;
    }

    .table-lesson tbody tr td .main .item{
        display: flex;
        align-items: center;
        margin-bottom: 13px;
        font-size: 13px;
    }
    .table-lesson tbody tr td .main .item:last-child{
        margin-bottom: 0;
    }
    .table-lesson tbody tr td .main .item > div{
        margin-right: 5px;
    }
    .table-lesson tbody tr td .main .item .btn-edit{
        display:flex;
        justify-content:center;
        align-items:center;
        margin-left: 8px;
        color: #2679B5;
        font-size: 18px;
    }
    .table-lesson tbody tr td .main .item .btn-add {
        margin-right: 90%;
        font-size: 18px;
        color: #69AA46;
        margin-left: 90%;
    }
    .table-lesson tbody tr td .main .item .title{
        width: 50%;
    }
    .table-lesson tbody tr td .main .item .price{
        width: 24%;
    }
    .table-lesson tbody tr td .main .item .img{
        width: 30px;
        height: 30px;
    }
    .table-lesson tbody tr td .main .item .img img{
        width: 30px;
        height: 30px;
    }
	.vertical-top {
		vertical-align: top !important;
		font-size: 34px;
	}

</style>
<div class="page-header">
	<h1 style="font-size: 20px;">
		<a class="a-back" href="<?= admin_url('data/recipe') ?>">
            <i class="fa fa-reply"></i>
		</a>
		<?= $recipe['title'] ?>
	</h1>
</div>
<div class="col-xs-12">
	<table class="table table-striped table-bordered table-hover table-lesson">
		<thead>
			<tr>
				<th width="">用餐时间</th>
				<th width="">星期一</th>
				<th width="">星期二</th>
				<th width="">星期三</th>
				<th width="">星期四</th>
				<th width="">星期五</th>
                <th width="">星期六</th>
                <th width="">星期日</th>
			</tr>
		</thead>
		<tbody>
			<?php foreach($recipe['timeArr'] as $key => $time): ?>
				<tr>
					<th style="font-weight: normal;">
						第<?= $key + 1 ?>时段
						<br/>
						<?= $time['begin_time'] ?>&nbsp; - &nbsp;<?= $time['end_time'] ?>
					</th>
					<!-- <td data-weekindex="1" data-classindex="<?= $key + 1 ?>">
                        <div class="main">
                            <div class="item">
                                <div class="img"><a href="https://resource.rongmixiao.com/2021/07/14/50e0a22e82b15a5448e428c114fb476b.jpg" target="_blank"><img src="https://resource.rongmixiao.com/2021/07/14/50e0a22e82b15a5448e428c114fb476b.jpg" alt=""></a></div>
                                <div class="title">鱼香肉丝</div>
                                <div class="price">￥18.8</div>
                                <div class="fa fa-pencil btn-action btn-edit" href="#modal-detail" data-toggle="modal"></div>
                            </div>
                            <div class="item">
                            <div class="img"><img src="https://resource.rongmixiao.com/2021/07/14/50e0a22e82b15a5448e428c114fb476b.jpg" alt=""></div>
                                <div class="title">小炒肉</div>
                                <div class="price">￥18.85</div>
                                <div class="fa fa-pencil btn-action btn-edit" href="#modal-detail" data-toggle="modal"></div>
                            </div>
                            <div class="item">
                                <div class="img"><img src="https://resource.rongmixiao.com/2021/07/14/50e0a22e82b15a5448e428c114fb476b.jpg" alt=""></div>
                                <div class="title">及啊撒酒疯大士大夫</div>
                                <div class="price">￥118.8</div>
                                <div class="fa fa-pencil btn-action btn-edit" href="#modal-detail" data-toggle="modal"></div>
                            </div>
                            <div class="item">
                                <div class="fa fa-plus btn-action btn-add" href="#modal-detail" data-toggle="modal"></div>
                            </div>
                        </div>
                    </td> -->
					<td data-weekindex="1" data-classindex="<?= $key + 1 ?>">
                        <div>
                            <i class="fa fa-plus btn-action btn-add" href="#modal-detail" data-toggle="modal"></i>
                        </div>
                    </td>
					<td data-weekindex="2" data-classindex="<?= $key + 1 ?>">
                        <div>
                            <i class="fa fa-plus btn-action btn-add" href="#modal-detail" data-toggle="modal"></i>
                        </div>
                    </td>
					<td data-weekindex="3" data-classindex="<?= $key + 1 ?>">
                        <div>
                            <i class="fa fa-plus btn-action btn-add" href="#modal-detail" data-toggle="modal"></i>
                        </div>
                    </td>
					<td data-weekindex="4" data-classindex="<?= $key + 1 ?>">
                        <div>
                            <i class="fa fa-plus btn-action btn-add" href="#modal-detail" data-toggle="modal"></i>
                        </div>
                    </td>
                    <td data-weekindex="5" data-classindex="<?= $key + 1 ?>">
                        <div>
                            <i class="fa fa-plus btn-action btn-add" href="#modal-detail" data-toggle="modal"></i>
                        </div>
                    </td>
                    <td data-weekindex="6" data-classindex="<?= $key + 1 ?>">
                        <div>
                            <i class="fa fa-plus btn-action btn-add" href="#modal-detail" data-toggle="modal"></i>
                        </div>
                    </td>
                    <td data-weekindex="7" data-classindex="<?= $key + 1 ?>">
                        <div>
                            <i class="fa fa-plus btn-action btn-add" href="#modal-detail" data-toggle="modal"></i>
                        </div>
                    </td>
				</tr>
			<?php endforeach ?>
		</tbody>
	</table>
</div>
<!-- 编辑课程弹窗 -->
<div id="modal-detail" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button> <span id="school-name"></span>
					编辑菜品
				</div>
			</div>
			<div class="modal-body no-padding">
				<div class="row">
					<div class="col-xs-12">
						<form class="form-horizontal mt10">
							<input type="hidden" name="detail_id" />
							<!-- 菜品排序key值 -->
							<input type="hidden" name="key" />
							<!-- 当前编辑是星期几 -->
							<input type="hidden" name="weekindex" />
							<!-- 当前编辑是第几节课 -->
							<input type="hidden" name="classindex" />
                            <div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">菜品名称：</label>
								<div class="col-sm-6">
									<input class="form-control" type="text" name="title" placeholder="请填写菜品名称"/>
								</div>
							</div>
                            <div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">菜品价格：</label>
								<div class="col-sm-6">
									<input class="form-control" type="number" name="price" placeholder="请填写菜品价格"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">菜品分类：</label>
								<div class="col-sm-6">
									<select class="form-control" name="cate_id">
										<?php foreach($recipeCateList as $cate): ?>
											<option value="<?= $cate['id'] ?>">
												<?= $cate['title'] ?>
											</option>
										<?php endforeach ?> 
									</select>
								</div>
							</div>
                            <div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">图片上传：</label>
								<div class="col-sm-6" id="imgs" style="display: flex;flex-wrap: wrap;-ms-flex-wrap: wrap;-webkit-flex-wrap: wrap;">
									<a href="javascript:;" id="upload-img">
										<img class="plus fit-cover" src="<?=$staticAdminUrl?>assets/images/upload.png" width="130" height="130" />
									</a>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer no-margin-top" >
				<a href="javascript:;" class="btn btn-sm btn-danger" id="delete-detail" style="margin-right: 10px;">
					<i class="ace-icon fa fa-times"></i> 删除
				</a>
				<a href="javascript:;" class="btn btn-sm btn-primary" id="save-detail">
					<i class="ace-icon fa fa-check"></i> 保存
				</a>
			</div>
		</div>
	</div>
</div>
<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script type="text/javascript">
	$(function() {

		$("body").on("click", ".table-lesson tbody tr td .btn-action", function() {
			var detailId = $(this).parents("td").data("detailid");
			var weekIndex = $(this).parents("td").data("weekindex");
			var classIndex = $(this).parents("td").data("classindex");

			// 设置隐藏input的值
			$("[name=detail_id]").val(detailId);
			$("[name=weekindex]").val(weekIndex);
			$("[name=classindex]").val(classIndex);

            // 是否添加操作
			var isAdd = $(this).hasClass("btn-add");
			var img = false;
			var title = '';
			var price = '';
			var cateId = false;
			var key = '-1';
			if(isAdd){
				// 添加情况，隐藏删除按钮
				$("#delete-detail").hide();
			} else {
				// 修改情况，显示删除按钮
				$("#delete-detail").show();
				// 获取标题
				title = $(this).parent(".item").find(".title").html();
				// 获取价格
				price = $(this).parent(".item").find(".price").html().replace("￥", "");
				// 获取图片
				img = $(this).parent(".item").find(".img").find('img').attr("src");
				// 获取菜品分类id
				cateId = $(this).data("cateid");
				// 获取菜品排序key值
				key = $(this).data("key");
				// alert(img);
			}
			// 设置表单值
			$("[name=title]").val(title);
			$("[name=price]").val(price);
			if(cateId) {
				$("[name=cate_id]").val(cateId);
			}
			$("[name=key]").val(key);
			// 图片上传
            var uploadTarget = $("#upload-img");
			uploadTarget.find("img").attr("src", img ? img : '<?=$staticAdminUrl?>assets/images/upload.png');
			setTimeout(function(){
				uploadTarget.uploader({
					"multiple": false,
					"server":  '<?=UP_FORM_URL?>',
					"authorization": "<?=$signature?>",
					"policy": "<?=$policy?>",
					"callback": function(response) {
						var imgFile = "<?=UP_URL?>" + response.url;
						uploadTarget.find("img").attr("src", imgFile);
					}
				});
			}, 200);
			setTimeout(function(){
				uploadTarget.uploader({
					"multiple": false,
					"server":  '<?=UP_FORM_URL?>',
					"authorization": "<?=$signature?>",
					"policy": "<?=$policy?>",
					"callback": function(response) {
						var imgFile = "<?=UP_URL?>" + response.url;
						uploadTarget.find("img").attr("src", imgFile);
					}
				});
			}, 500);
		});

		// 保存课程
		$("#save-detail").click(function() {
			var detailId = $("[name=detail_id]").val();
			var key = $("[name=key]").val();
			var weekIndex = $("[name=weekindex]").val();
			var classIndex = $("[name=classindex]").val();
			var title = $("[name=title]").val();
			var price = $("[name=price]").val();
            var cateId = $("[name=cate_id]").val();
			var img = $("#upload-img img").attr("src");
			var posturl = "<?= admin_url('data/save_recipe_detail_action') ?>";
			var postdata = {
				'recipe_id': "<?= $recipe['id'] ?>",
				'detail_id': detailId,
				'key' : key,
				'week_index': weekIndex,
				'class_index': classIndex,
				'title': title,
				'price': price,
                'cate_id': cateId,
				'img': img,
			};
            // console.log(postdata);return;
			ajax_post(posturl, postdata, function() {
				// 刷新页面
                window.location.reload();
			});
		});
		// 删除课程
		$("#delete-detail").click(function(){
			var detailId = $("[name=detail_id]").val();
			var key = $("[name=key]").val();
			var title = $("[name=title]").val();
			var posturl = "<?= admin_url('data/delete_recipe_detail_action') ?>";
			layer.confirm('确定删除：' + title + '吗？', { title:"提示", offset: '130px' }, function(){
				ajax_post(posturl, { "detail_id": detailId, "key": key }, function() {
					// 刷新页面
					window.location.reload();
				});
			});
		});
		// 初始化课程内容
		<?php if(isset($detailList) && !empty($detailList)): ?>
			<?php foreach($detailList as $detail): ?>
                var itemStr = "";
				<?php if($detail['contentArr']): ?>
					<?php foreach($detail['contentArr'] as $key => $content): ?>
						var imgStr = "";
						<?php if($content['img']): ?>
							imgStr = "<div class='img'><a href='<?= $content['img'] ?>' target='_blank'><img src='<?= $content['img'] ?>'></a></div>";
						<?php else: ?>
							imgStr = "<div class='img'></div>";
						<?php endif ?>
						itemStr += "\
						<div class='item'>" + imgStr + "\
							<div class='title'><?= $content['title'] ?></div>\
							<div class='price'>￥<?= $content['price'] ?></div>\
							<div class='fa fa-pencil btn-action btn-edit' href='#modal-detail' data-toggle='modal' data-cateid='<?= $content['cate_id'] ?>'\
							data-key='<?= $key ?>' data-id='<?= $detail['id'] ?>' ></div>\
						</div>";
					<?php endforeach ?>
					// 添加按钮
					itemStr += '<div class="item"><div class="fa fa-plus btn-action btn-add" href="#modal-detail" data-toggle="modal" data-id="<?= $detail['id'] ?>"></div></div>';    

					$(".table-lesson tbody tr:nth-child(<?= intval($detail['timeslot']) ?>) td:nth-child(<?= $detail['week'] + 1 ?>)").html("\
					<div class='main'>" + itemStr + "</div>").attr('data-detailid', <?= $detail['id'] ?>).addClass("vertical-top");
				<?php else: ?>
					$(".table-lesson tbody tr:nth-child(<?= intval($detail['timeslot']) ?>) td:nth-child(<?= $detail['week'] + 1 ?>)").attr('data-detailid', <?= $detail['id'] ?>);
				<?php endif ?>	
			<?php endforeach ?>
		<?php endif ?>
	})

</script>